/* Dark Navbar Background */
.navbar {
  background-color: #5d5b6a !important;
}
.bg-dark {
  background-color: #5d5b6a !important;
}

/* Custom color for Brand */
.navbar-brand {
  color: #ffffff; /* White color for Brand text */
}

.navbar-brand:hover {
  color: #00bcd4; /* Blue color on hover for Brand */
}

/* Navbar links */
.navbar-nav .nav-link {
  color: #dcdcdc; /* Light gray color for navbar links */
}

.navbar-nav .nav-link:hover {
  color: #00bcd4; /* Light blue color for navbar links on hover */
}

.navbar-nav .nav-link.active {
  color: #00bcd4;
  font-weight: 900 !important;
}

/* Optional: Adjust navbar toggle icon color */
.navbar-toggler-icon {
  background-color: #ffffff; /* White color for the hamburger icon */
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1030; /* Keep it above other content if necessary */
  background-color: #212529; /* Dark background matching navbar */
  color: #ffffff; /* White text color */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow above footer */
}

.footer span {
  font-size: 0.9rem; /* Adjust font size */
  color: #b0b0b0; /* Muted gray for copyright text */
}

.footer a {
    color: #ffffff; /* Bootstrap's default info color or choose a custom color */
    text-decoration: none; /* Remove underline by default */
}

.footer a:hover {
    color: #00bcd4; /* Bootstrap's default primary color or choose a custom hover color */
    text-decoration: underline; /* Add underline on hover */
}

/* Carousel Container Styling */
#carouselExampleIndicators {
    max-width: 90%; /* Adjust this for the carousel width */
    margin: 0 auto; /* Center the carousel on the page */
    position: relative; /* Allow arrow positioning relative to the container */
}

/* Image Styling */
.carousel-img {
    max-height: 300px; /* Adjust height to your desired value */
    object-fit: contain; /* Prevent cropping, fit the image within its container */
    background-color: transparent; /* Optional background color for padding */
    margin: auto; /* Center the image within the carousel */
}

/* Arrow Positioning */
.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Narrower clickable area for better positioning */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Ensure arrows are above everything else */
    background: none; /* Remove default background */
}

/* Position the arrows outside the image */
.carousel-control-prev {
    left: 10%; /* Adjust the offset for positioning outside the image */
}

.carousel-control-next {
    right: 10%; /* Adjust the offset for positioning outside the image */
}

/* Arrow Icon Size */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2rem; /* Resize arrow icons */
    height: 2rem;
    background-color: black;
    background-size: 100%; /* Ensure proper scaling */
}


.custom-btn {
    background-color: #00bcd4; /* Blue background color */
    color: white; /* White text */
    outline: None;
    font-size: 1.2rem; /* Increase font size */
    padding: 10px 20px; /* Add padding */
    border: none !important;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.custom-btn:hover {
    outline: None;
    color: white;
    background-color: #95b0b6; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight upward movement on hover */
}

.custom-btn:focus {
    color: white;
    outline: none;
    box-shadow: 0 0 0 0.2rem #95b0b6; /* Add a light focus ring */
}

/* Add custom styles for the active state to prevent turning white */
.custom-btn:active {
    outline: None;
    background-color: #00bcd4 !important; /* Ensure the button stays blue when clicked */
    color: white !important; /* Keep the text white */
    transform: translateY(0); /* Remove the upward movement effect when active */
}